<template>
  <el-dialog title="库存信息" v-model="visible" align-center width="900px" @close="handleClose" :close-on-click-modal="false" :append-to-body="true">
    <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="订单SKU" name="1">
        <div v-if="isAssembles" class="mb-[8px]">组合SKU：{{ formData.sku }}</div>
        <el-table :data="formData.tableData" border style="width: 100%">
          <el-table-column v-for="item in tableColumns" :key="item.field" :prop="item.field" :label="item.title" :width="item.width" />
        </el-table>
        <!-- 组合SKU -->
        <div v-if="isAssembles">
          <div v-for="item in formData.assembles" :key="item.sku" class="mt-[12px]">
            <div class="my-[8px]">子SKU：{{ item.sku }} 数量*{{ item.quantity }}</div>
            <el-table :data="item.table" border style="width: 100%">
              <el-table-column v-for="items in tableColumns" :key="items.field" :prop="items.field" :label="items.title" :width="items.width" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="配货SKU" name="2">
        <el-table :data="formData.configTable" border style="width: 100%">
          <el-table-column v-for="items in configTableColumns" :key="items.field" :prop="items.field" :label="items.title" :width="items.width" />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="平台/海外仓库存" name="3">
        <div v-if="isAssembles" class="mb-[8px]">组合SKU：{{ formData.sku }}</div>
        <el-table :data="formData.platformTable" border style="width: 100%">
          <el-table-column v-for="items in platformTableColumns" :key="items.field" :prop="items.field" :label="items.title" :width="items.width" />
        </el-table>
        <!-- 组合SKU -->
        <div v-if="isAssembles">
          <div v-for="item in formData.assembles" :key="item.sku" class="mt-[12px]">
            <div class="my-[8px]">子SKU：{{ item.sku }} 数量*{{ item.quantity }}</div>
            <el-table :data="item.platformTable" border style="width: 100%">
              <el-table-column v-for="items in tableColumns" :key="items.field" :prop="items.field" :label="items.title" :width="items.width" />
            </el-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const visible = ref(false)
const formData = ref({ tableData: [], platformTable: [] })
import req from "@/views/user/list/add/api/index"
import { getDeclareInfo } from "@/api/public"

const activeName = ref("1")

const tableColumns = [
  { field: "warehouse_name", title: "仓库名称" },
  { field: "wms_attribute_cn", title: "仓库属性", width: "100" },
  { field: "asin", title: "ASIN", width: "120" },
  { field: "owner_name", title: "货主", width: "180" },
  { field: "num", title: "可用库存", width: "90" },
  { field: "lock_num", title: "锁定库存", width: "90" },
  { field: "transit_num", title: "在途库存", width: "90" },
]
const configTableColumns = [
  { field: "sku", title: "SKU", width: "90" },
  { field: "num", title: "配货数量" },
  { field: "warehouse_name", title: "发货仓库" },
  { field: "wms_attribute_cn", title: "仓库属性", width: "100" },
  { field: "asin", title: "ASIN", width: "120" },
  { field: "owner_name", title: "货主", width: "180" },
  { field: "num", title: "可用库存", width: "90" },
  { field: "transit_num", title: "在途库存", width: "90" },
]

const platformTableColumns = [
  { field: "warehouse_name", title: "仓库名称" },
  { field: "wms_attribute_cn", title: "仓库类型" },
  { field: "asin", title: "ASIN", width: "120" },
  { field: "num", title: "可用库存", width: "90" },
  { field: "lock_num", title: "锁定库存", width: "90" },
  { field: "transit_num", title: "在途库存", width: "90" },
]
const isAssembles = ref(false)
// 打开弹窗
const open = async (item) => {
  visible.value = true
  formData.value = { ...item }

  isAssembles.value = !!item.assembles.length
  req.ownerInventory({ data: [{ sku: item.sku }] }).then((res) => {
    formData.value.tableData = res.data[0].inventory
    formData.value.assembles.forEach(async (row) => {
      row.table = (await req.ownerInventory({ data: [{ sku: row.sku }] }))?.data?.[0]?.inventory
    })
  })

  // 配货sku
  let configTable = []
  for (let i = 0; i < formData.value.distribution_skus.length; i++) {
    let row = formData.value.distribution_skus[i]
    configTable.push({
      ...(await req.ownerInventory({ data: [{ sku: row.sku, warehouse_id: item.warehouse_id }] }))?.data?.[0]?.inventory?.[0],
      sku: row.sku,
      num: row.num,
      asin: row.asin,
      warehouse_name: item.warehouse_name,
      // wms_attribute_cn: item.wms_attribute_cn,
    })
  }
  formData.value.configTable = configTable

  // 平台/海外仓库存
  const platformTable = (await req.platformInventory({ sku: [item.sku] }))?.data
  formData.value.platformTable = platformTable

  formData.value.assembles.forEach(async (row) => {
    row.platformTable = (await req.platformInventory({ sku: [row.sku] }))?.data
  })
}
const getData = async (item) => {
  let skuData = (await req.ownerInventory({ data: [{ sku: item.sku }] }))?.data?.[0]
  let assemblesData = await item?.assembles.map(async (row) => {
    let data = { quantity: row.quantity, ...(await req.ownerInventory({ data: [{ sku: row.sku }] }))?.data?.[0] }
    return data
  })

  assemblesData = await Promise.all(assemblesData)
  return { skuData, assemblesData }
}
// 关闭弹窗
const close = () => {
  visible.value = false
  activeName.value = "1"
  formData.value = {
    tableData: [],
  }
}
const handleClose = () => {
  visible.value = false
}
defineExpose({
  open,
  getData,
})
</script>
<style lang="scss" scoped></style>
